<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      
      img{width:100px;}
      
    </style>
	</head>
	<body>
    <div id="app">
      <h3>{{sum}}</h3>
      <ul>
        <li v-for="(item,idx) in list" :style="[s]" :key="item.proId">
          <img :src="item.img" alt="">
          <p>{{item.proName}}</p>
          <p>{{item.price}}</p>
          <button @click="red(idx)" v-if="item.sales!==1">-</button>
          <span>{{item.sales}}</span>
          <button @click="add(idx)">+</button>
          <button @click="del(idx)">删除</button>
        </li>
      </ul>
    </div>
	</body>
  <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
    
    var vm = new Vue({
      el:"#app",
      data:{
        list:[],
        s:{
          float:"left",
          width:"300px"
        }
      },
      mounted(){
        let url = "http://localhost:3000/api/pro/page"
        axios(url,{
          params:{
            num:5,
            index:0
          }
        }).then(res=>{
          if(res.data.code === 200){
            this.list = res.data.msg
          }
        })
      },
      computed:{
        sum(){
          return this.list.reduce((start,val)=>{
            return start += val.sales;
          },0)
        }
      },
      methods:{
        red(i){
          this.list[i].sales--;
        },
        add(i){
          this.list[i].sales++;
        },
        del(i){
          this.list.splice(i, 1);
        }
      }
    })
    
    
  </script>
</html>
